<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Add new Animal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/javascripts/addAnimals.js"></script>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    input[type=text], select, textarea {
        width: 50%;
        padding: 13px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
    }

    label {
        padding: 12px 12px 12px 0;
        display: inline-block;
    }

    input[type=submit] {
        display: block;margin: 0 auto;
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        float: right;
        width: 30%;
    }

    input[type=submit]:hover {
        background-color: #45a049;
    }

    .col-30 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }

    .col-70 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .row{
        padding: 10px;
    }

    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .col-30, .col-70, input[type=submit] {
            width: 100%;
            margin-top: 0;
        }
    }
</style>
<body>
<% include ./public/header.ejs %>
<div class="container" style="text-align: center;background-color: #f2f2f2;border-radius: 5px;margin-top: 50px;">
    <h1 class="fs-4 fw-bold">Please enter the animal's basic information.</h1>
    <form id= "xForm" enctype="multipart/form-data" onsubmit="onSubmit('/add')" method="POST">
        <div class="row">
            <div class="col-30">
                <label for="name">Name:</label>
            </div>
            <div class="col-70">
                <input type="text" name="name" id="name">
            </div>
        </div>
        <div class="row">
            <div class="col-30">
                <label for="breed">Breed:</label>
            </div>
            <div class="col-70">
                <select id="breed" name="breed">
                    <option value="Dog">Dog</option>
                    <option value="Cat">Cat</option>
                    <option value="Alpaca">Alpaca</option>
                    <option value="others">Others</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-30">
                <label for="location">Location</label>
            </div>
            <div class="col-70">
                <select id="location" name="location">
                    <option value="London">London</option>
                    <option value="Sheffield">Sheffield</option>
                    <option value="Others">Others</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-30">
                <label for="myImg">Choose an image</label>
            </div>
            <div class="col-70">
                <input type="file" id="myImage" name="myImg" accept="image/*">
            </div>
        </div>
        <div class="row">
            <input type="submit" value="Submit">
        </div>
    </form>
</div>

<% include ./public/footer.ejs %>

</body>
</html>